<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_1356455_c5d3d3ohlbq.css"
    />
  </head>
  <body>
    <style>
      input {
        -webkit-appearance: none;
        border: 0 none;
        outline: 0 none;
        cursor: pointer;
      }
      .content {
        display: flex;
        flex-direction: row-reverse;
        margin: 0 auto;
        width: 300px;
      }

      :root {
        --main: #ffa822;
        --basic: #999;
      }

      /* 设置默认 样式 */
      .content input[name='star'] {
        font-family: 'iconfont';
        font-size: 30px;
        padding-right: 10px;
      }

      .content input[name='star']::after {
        content: '\e645';
        /* 默认颜色 */
        color: var(--basic);
        /* 增加颜色过渡效果 */
        transition: color 0.4s ease;
      }

      /* 增加选中颜色、高亮其兄弟元素 */
      .content input[name='star']:checked::after,
      .content input[name='star']:checked ~ input[name='star']::after {
        content: '\e73c';
        color: var(--main);
      }

      .content input[name='star']:checked,
      .content input[name='star']:hover::after {
        content: '\e73c';
        color: var(--main);
      }

      .content input[name='star']:hover ~ input[name='star']::after {
        content: '\e73c';
        color: var(--main);
      }
      input[name='rate'] {
        transition: transform 0.2s ease;
      }
      input[name='rate']:checked,
      input[name='rate']:hover {
        transform: scale(1.2);
      }
    </style>
    <div class="content">
      <input type="radio" name="star" />
      <input type="radio" name="star" />
      <input type="radio" name="star" />
      <input type="radio" name="star" />
      <input type="radio" name="star" />
    </div>
  </body>
</html>

<!-- 基本布局
先把默认的星星显示出来
实现选中单个星星
实现连同兄弟元素一起高亮
然后把input反向排列
鼠标移入预览选中效果
加入放大动画 -->
